<template>
  <div class="indexComparisonContent mainContent">
    <vue-datepicker-local v-model="emptyTime" clearable :placeholder="'请选择时间范围'" />
    <input class="iptEvent" type="button" value="编辑事件" @click="routerView" />
    <input class="iptEvent" type="button" value="指标对比" @click="signContrast" />
    <div class="chartBox">
      <div id="myChart" class="line" v-if="opData.length"></div>
    </div>
    <modal ref="alert" :title="'选择对比项'" :sureBtn="addEventTitle" :btnSave="'对比'">
      <header>
        <h2 class="titleHeader">检验系选择</h2>
        <div class="titleHeader_box">
          <input type="text" name="name" v-model="searchVal" @change="searchChange" />
          <button @click="search">搜索</button>
        </div>
      </header>
      <div class="contrast">
        <div class="content" @scroll="onScroll">
          <tree-menu :tree-data="treeData" :flat-tree="flatTree"></tree-menu>
          <loading v-if="showScroll"></loading>
          <loading v-if="isShow &&treeData.length == 0"></loading>
          <noSearch v-if="!isShow && treeData.length == 0"></noSearch>
        </div>
        <div class="contentButton">
          <div>
            <button @click="addSign">添加</button>
            <br />
            <button @click="removeSign">删除</button>
          </div>
        </div>
        <div class="content">
          <div v-if="signData.length">
            <ul v-for="(item,index) in signData">
              <li class="contentList">
                <input
                  type="checkbox"
                  :id="'PatientName'+index"
                  v-model="msg"
                  :value="item.nodeKey"
                />
                <label :for="'PatientName'+index" class="score">{{item.label}}</label>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="wxtx">温馨提示：选择的指标项不能超过5个</div>
    </modal>
    <loading v-if="isShow && heartRateData.length == 0"></loading>
    <noSearch v-if="!isShow && heartRateData.length == 0"></noSearch>
  </div>
</template>
<script>
import {
  apiSigns,
  apiEventList,
  apiGetReportEvent,
  apiInspectionComparison
} from "@/api/api"; //引入体征列表数据
import { standardDate } from "@/components/common/date"; //引入时间转换JS
import VueDatepickerLocal from "@/components/datepicker/VueDatepickerLocal";
import loading from "@/components/loading/loading";
import noSearch from "@/components/search/noSearch"; //导入没有搜索结果组
import modal from "@/components/modal/modal";
import treeMenu from "@/components/treeMenu/treeMenu";
import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
// 引入饼状图组件
require("echarts/lib/chart/line");

//引入uuid文件
export default {
  data() {
    return {
      title: [
        "心率",
        "体温",
        "脉搏",
        "自主呼吸频率",
        "无创舒张压",
        "无创收缩压",
        "血氧饱和度"
      ],
      opData: [],
      heartRateData: [], //心率
      animalHeatData: [], //体温
      sphygmusData: [], //脉搏,
      diastolicBloodPressureData: [], //舒张压
      systolicPressureData: [], //收缩压
      oxyhemoglobinSaturationData: [], //血氧饱和度
      breatheData: [], //呼吸
      eventsArray: [],
      isShow: true,
      emptyTime: [],
      startDate: this.$store.state.stateData.Time_DEPT_In.replace(
        "T",
        ""
      ).substring(0, 10),
      endDate: standardDate(new Date()),
      showDialog: false, //标识模态框是否出现
      searchVal: "",
      treeData: [],
      flatTree: [],
      msg: [], //存储复选框的值
      signData: [],
      checkedNodes: [],
      yAxisIndex: [1, 2, 3, 4, 5], //存储是否显示到左边还是右边
      yAxisData: [
        {
          type: "value",
          name: "值",
          position: "left",
          offset: 0
        }
      ], //Y轴默认值
      pageSize: 5, //每页显示5条数据
      currentPage: 1, //当前页码
      count: 0, //总页数
      //懒加载
      isScroll: true,
      showScroll: false
    };
  },
  watch: {
    emptyTime: {
      handler(curVal, oldVal) {
        if (
          standardDate(curVal[0]) == "NaN-NaN-NaN" ||
          standardDate(curVal[1]) == "NaN-NaN-NaN"
        ) {
          this.startDate = this.$store.state.stateData.Time_DEPT_In.replace(
            "T",
            ""
          ).substring(0, 10);
          this.endDate = standardDate(new Date());
          this.isShow = true;
          this.getApiSigns();
        } else {
          this.startDate = standardDate(curVal[0]);
          this.endDate = standardDate(curVal[1]);
          this.isShow = true;
          this.getApiSigns();
        }
      }
    },
    checkedNodes: {
      handler(curVal, oldVal) {
        let nameArr = [];
        let checkedArr = []; //指标详情的nodeKey储存数组
        for (let ind in curVal) {
          if ($.inArray(curVal[ind].label, nameArr) == -1) {
            nameArr.push(this.checkedNodes[ind].label);
            if (curVal[ind].children != undefined) {
              this.checkedNodes.splice(ind, 1);
            }
          } else {
            this.checkedNodes[ind].checked = false; //把删除的指标项复选框改成未选中状态
            this.checkedNodes.splice(ind, 1);
            this.$toast.center("请不要选择重复的指标项");
          }
        }
        if (this.checkedNodes.length > 5) {
          this.$toast.center("选择的指标不能超过5个！！");
        }
      },
      deep: true
    }
  },
  created: function() {
    this.getApiSigns();
    //console.log(standardDate(new Date()))
  },
  mounted() {
    Bus.$on("checkedNodes", e => {
      this.checkedNodes = e;
      //console.log(e);
    });
    //this.drawChart();
  },
  methods: {
    //监听滚动条事件
    onScroll() {
      let viewH = $(".contrast .content").height(); //可见高度
      let contentH = $(".contrast .content>ul").height(); //内容高度
      let scrollTop = $(".contrast .content").scrollTop(); //滚动高度
      if (scrollTop / (contentH - viewH) == 1 && this.isScroll) {
        //到达底部100px时,加载新内容
        if (this.currentPage >= this.count || !this.isScroll) {
          if (contentH - viewH - scrollTop <= 25) {
            this.$toast.center("已加载所有列表！");
          }
          return;
        }
        this.currentPage++;
        this.showScroll = true;
        this.isScroll = false;
        this.GetReportEvent();
        //console.log(this.currentPage)
      }
    },
    //点击指标对比按钮执行事件
    signContrast() {
      //console.log('对比');
      this.signData = [];
      this.currentPage = 1; // 页码重置
      this.treeData = [];
      this.flatTree = [];
      this.GetReportEvent();
      this.$refs.alert.show();
    },
    //指标项详情后台获取
    GetReportEvent() {
      let arr = [];
      let index = -1;
      apiGetReportEvent({
        reportName: this.searchVal,
        patientId: this.$store.getters.ID,
        pageIndex: this.pageSize * this.currentPage - 4,
        pageSize: this.pageSize * this.currentPage
      }).then(res => {
        if (JSON.parse(res).Status == 1) {
          if (JSON.stringify(JSON.parse(res).Data) == "{}") {
            this.isShow = false;
            this.isScroll = false;
            //console.log(111111)
          } else {
            //console.log(JSON.parse(res).Data)
            this.isShow = true;
            for (let key in JSON.parse(res).Data) {
              arr.push({ label: key, children: [] });
              index++;
              for (let ind of JSON.parse(res).Data[key]) {
                //console.log(ind)
                if (JSON.parse(res).Data[key] instanceof Array) {
                  arr[index].children.push({ label: ind });
                } else {
                  arr[index].children = [{ label: JSON.parse(res).Data[key] }];
                }
              }
            }
            if (this.currentPage == 1) {
              this.treeData = this.compileTreeData(arr);
              this.flatTree = this.compileFlatTree(arr, 0);
            } else {
              let len = this.flatTree.length;
              this.treeData.push.apply(
                this.treeData,
                this.compileTreeData(arr)
              );
              this.flatTree.push.apply(
                this.flatTree,
                this.compileFlatTree(arr, len)
              );
            }
            this.isScroll = true;
            this.showScroll = false;
            this.count = Math.ceil(JSON.parse(res).TotalCount / this.pageSize); //计算总页数
          }

          //console.log(JSON.parse(res))
          //console.log(arr)
        } else {
          this.isShow = false;
          this.isScroll = false;
        }
      });
    },
    //点击弹出框确认按钮事件
    addEventTitle() {
      if (this.signData.length == 0) {
        this.$toast.center("请选择指标项在点击对比！！");
        setTimeout(() => {
          this.$refs.alert.show();
        }, 600);
      } else {
        //console.log(this.signData);
        let arr = [];
        for (let item of this.signData) {
          arr.push(item.label);
        }
        this.opData = [];
        this.getEvents();
        apiInspectionComparison({
          patientID: this.$store.getters.ID,
          itemName: arr + "",
          startDate: this.startDate,
          endDate: this.endDate
        }).then(res => {
          if (JSON.parse(res).Status == 1) {
            //当状态码为1时（请求成功）
            if (JSON.parse(res).Data.length != 0) {
              //当返回的数据长度不为0时
              // console.log(JSON.parse(res).Data);
              let ind = this.signData.length;
              let indexListData = [[], [], [], [], [], []];
              let name = [];
              let borderColor = [
                "#F1AB27",
                "#B96CD3",
                "#2F9323",
                "#D9B63A",
                "#2E2AA4",
                "#9F2E61",
                "#4D670C"
              ];
              this.title = [
                "心率",
                "体温",
                "脉搏",
                "自主呼吸频率",
                "无创舒张压",
                "无创收缩压",
                "血氧饱和度"
              ];
              this.yAxisData = [
                {
                  type: "value",
                  name: "值",
                  position: "left",
                  offset: 0
                }
              ]; //Y轴默认值
              for (let index in this.signData) {
                this.opData.push({
                  name: this.signData[index].label,
                  type: "line",
                  //设置折线图颜色
                  itemStyle: {
                    normal: {
                      color: borderColor[Number(index) + 1],
                      lineStyle: {
                        color: borderColor[Number(index) + 1]
                      }
                    }
                  },
                  yAxisIndex: this.yAxisIndex[index],
                  symbol: "emptycircle", //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                  data: indexListData[index]
                });
                this.title.push(this.signData[index].label);
              }
              for (var i = 1; i < this.signData.length + 1; i++) {
                if (i % 2 == 0) {
                  //当为偶数时（即 0 2 4）
                  this.yAxisData.push({
                    type: "value",
                    name: "",
                    position: "left",
                    offset: Math.floor(i / 2) * 40,
                    axisLine: {
                      lineStyle: {
                        color: borderColor[i]
                      }
                    }
                  });
                } else {
                  //当为奇数数时（即 1 3 5）
                  this.yAxisData.push({
                    type: "value",
                    name: "",
                    position: "right",
                    offset: Math.floor(i / 2) * 40,
                    axisLine: {
                      lineStyle: {
                        color: borderColor[i]
                      }
                    }
                  });
                }
              }
              for (var i = 0; i < ind; i++) {
                for (var item of JSON.parse(res).Data) {
                  if (item.REPORT_ITEM_NAME == this.signData[i].label) {
                    switch (i) {
                      case 0:
                        name = indexListData[0];
                        break;
                      case 1:
                        name = indexListData[1];
                        break;
                      case 2:
                        name = indexListData[2];
                        break;
                      case 3:
                        name = indexListData[3];
                        break;
                      case 4:
                        name = indexListData[4];
                        break;
                    }
                    if (item.RESULT != "") {
                      name.push([
                        this.filterDate(item.time_check),
                        item.RESULT
                      ]);
                    }
                  }
                }
              }
              this.drawLine();
            } else {
            }
          } else if (JSON.parse(res).Status == -1) {
          }
        });
      }
    },
    //搜索框值改变为空时执行事件
    searchChange() {
      if (this.searchVal == "") {
        this.currentPage = 1; // 页码重置
        this.treeData = [];
        this.flatTree = [];
        this.GetReportEvent();
      }
    },
    //搜索按钮事件
    search() {
      if (this.searchVal == "") {
        this.$toast.center("搜索的内容不能为空！");
      } else {
        this.currentPage = 1; // 页码重置
        this.treeData = [];
        this.flatTree = [];
        this.GetReportEvent();
      }
    },
    existsSameValues(a1, a2) {
      var exists = false;
      if (a1 instanceof Array && a2 instanceof Array) {
        for (var i = 0, iLen = a1.length; i < iLen; i++) {
          for (var j = 0, jLen = a2.length; j < jLen; j++) {
            if (a1[i].label === a2[j].label) {
              return true;
            }
          }
        }
      }
      return exists;
    },
    //添加体征指标
    addSign() {
      if (this.checkedNodes.length <= 5) {
        let nameArr = [];
        if (this.signData.length == 0) {
          for (let ind in this.checkedNodes) {
            if (this.checkedNodes[ind].children == undefined) {
              this.signData.push(this.checkedNodes[ind]);
            }
          }
        } else {
          if (this.existsSameValues(this.signData, this.checkedNodes)) {
            this.signData = [];
            for (let ind in this.checkedNodes) {
              if (this.checkedNodes[ind].children == undefined) {
                this.signData.push(this.checkedNodes[ind]);
              }
            }
            //this.$toast.center('请不要重复添加指标！');
          } else {
            for (let ind in this.checkedNodes) {
              if (this.checkedNodes[ind].children == undefined) {
                this.signData.push(this.checkedNodes[ind]);
              }
            }
          }
        }
      } else {
        this.$toast.center("选择的指标不能超过5个！！");
      }
    },
    //删除体征指标
    removeSign() {
      if (this.msg.length == 0) {
        this.$toast.center("请先选择需要删除的指标项！！");
      } else {
        let checkedArr = []; //指标详情的nodeKey储存数组
        let signArr = []; //添加的指标nodeKey储存数组
        for (let item of this.checkedNodes) {
          checkedArr.push(item.nodeKey);
        }
        for (let item of this.signData) {
          signArr.push(item.nodeKey);
        }
        for (let item of this.msg) {
          this.checkedNodes[$.inArray(item, checkedArr)].checked = false; //把删除的指标项复选框改成未选中状态
          this.checkedNodes.splice($.inArray(item, signArr), 1); //删除选中的指标项
          this.signData.splice($.inArray(item, signArr), 1); //删除选中的指标项
        }
        this.msg = [];
        //console.log(this.checkedNodes)
      }
    },
    //数据初始化(添加某些必要属性)
    compileTreeData(arr) {
      function newAttr(node, parent) {
        node.expand = true; //是否展开
        node.checked = false; //是否勾选
        node.selected = false; //是否选中
        if (node.children) {
          node.children.forEach(child => {
            return newAttr(child, node);
          });
        }
      }
      arr.forEach(item => {
        newAttr(item);
      });
      return arr;
    },
    //编制各节点对应关系
    compileFlatTree(arr, len) {
      var keyCounter = len;
      var childrenKey = "children";
      var flatTree = [];
      function flattenChildren(node, parent) {
        node.nodeKey = keyCounter++;
        flatTree[node.nodeKey] = {
          node: node,
          nodeKey: node.nodeKey
        };
        if (typeof parent != "undefined") {
          flatTree[node.nodeKey].parent = parent.nodeKey;
          flatTree[parent.nodeKey][childrenKey].push(node.nodeKey);
        }
        if (node[childrenKey]) {
          flatTree[node.nodeKey][childrenKey] = [];
          node[childrenKey].forEach(function(child) {
            return flattenChildren(child, node);
          });
        }
      }
      arr.forEach(function(rootNode) {
        flattenChildren(rootNode);
      });
      for (let i = 0; i < flatTree.length; i++) {
        if (flatTree[i] === undefined) {
          flatTree.splice(i, 1);
          i = i - 1; // i - 1 ,因为空元素在数组下标 2 位置，删除空之后，后面的元素要向前补位
        }
      }
      return flatTree;
    },
    // 基于准备好的dom，初始化echarts实例
    drawLine() {
      //console.warn("基于准备好的dom，初始化echarts实例");

      var myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.clear();
      myChart.setOption({
        //title: { text: '在Vue中使用echarts' },
        color: [
          "red",
          "#34affd",
          "#ff5555",
          "#ffde00",
          "#5af4ce",
          "#d050ff",
          "#CD5C5C",
          "#4DCD53",
          "#1F814A",
          "#BF675F",
          "#673509",
          "#310937",
          "#1B9637",
          "#F7393C"
        ], //折线颜色
        legend: {
          data: this.title
        },
        grid: {
          //折线位置
          top: "15%",
          right: "15%",
          left: "15%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: [
          {
            type: "time"
          }
        ],
        yAxis: this.yAxisData,
        dataZoom: [
          {},
          {
            type: "inside"
          }
        ],
        series: this.opData
      });
      //myChart.on('click', function (params) {
      //  //var temp = '<div><input tyep="text" value=' + params.name + "\n" + params.value + "\n" + params.seriesName+'/></div>';
      //  alert(params.name + "\n" + params.value + "\n" + params.seriesName);
      //  //return temp;
      //});
    },
    //设置曲线的值
    getopData() {
      this.opData = [
        {
          name: "心率",
          type: "line",
          symbol: "emptycircle", //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
          data: this.heartRateData
        },
        {
          name: "体温",
          type: "line",
          symbol: "emptycircle", //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
          data: this.animalHeatData
        },
        {
          name: "脉搏",
          type: "line",
          symbol: "emptycircle", //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
          data: this.sphygmusData
        },
        {
          name: "自主呼吸频率",
          type: "line",
          symbol: "emptycircle", //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
          data: this.breatheData
        },
        {
          name: "无创舒张压",
          type: "line",
          symbol: "emptycircle", //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
          data: this.diastolicBloodPressureData
        },
        {
          name: "无创收缩压",
          type: "line",
          symbol: "emptycircle", //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
          data: this.systolicPressureData
        },
        {
          name: "血氧饱和度",
          type: "line",
          symbol: "emptycircle", //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
          data: this.oxyhemoglobinSaturationData
        }
      ];
    },
    //编辑事件生成图表
    getEvents() {
      this.getopData();
      apiEventList({
        patientID: this.$store.getters.ID,
        startTime: this.startDate,
        endTime: this.endDate,
        pageIndex: 1,
        pageSize: 20
      })
        .then(res => {
          var eventData = JSON.parse(res);

          if (eventData.Status == 1) {
            for (var j = 0; j < eventData.Data.length; j++) {
              if (
                eventData.Data[j]["StartTime"] != eventData.Data[j]["EndTime"]
              ) {
                this.opData.push({
                  name: eventData.Data[j]["EventName"],
                  type: "line",
                  symbol: "emptydiamond",
                  data: [
                    [
                      this.filterDate(eventData.Data[j]["StartTime"]),
                      eventData.Data[j]["EventValue"]
                    ],
                    [
                      this.filterDate(eventData.Data[j]["EndTime"]),
                      eventData.Data[j]["EventValue"]
                    ]
                  ],
                  //markLine: {
                  //  data: [
                  //    [{
                  //      xAxis:this.filterDate(eventData.Data[j]["EndTime"]),
                  //      yAxis:eventData.Data[j]['EventValue']
                  //    }, {
                  //      symbol: 'circle',
                  //      label: {
                  //        normal: {
                  //          position: 'start',
                  //          formatter: eventData.Data[j]['EventName']
                  //        }
                  //      },
                  //      type: 'max',
                  //      }], { xAxis: this.filterDate(eventData.Data[j]["StartTime"]) }, { xAxis: this.filterDate(eventData.Data[j]["EndTime"]) }
                  //  ]
                  //}
                  markArea: {
                    silent: true,
                    label: {
                      fontSize: 16
                    },
                    itemStyle: {
                      normal: {
                        color: "transparent",
                        borderWidth: 1,
                        borderType: "dashed"
                      }
                    },
                    data: [
                      [
                        {
                          name: eventData.Data[j]["EventName"],
                          xAxis: this.filterDate(
                            eventData.Data[j]["StartTime"]
                          ),
                          yAxis: 0
                        },
                        {
                          xAxis: this.filterDate(eventData.Data[j]["EndTime"]),
                          yAxis: eventData.Data[j]["EventValue"]
                        }
                      ]
                    ]
                  }
                });
              } else {
                this.opData.push({
                  name: eventData.Data[j]["EventName"],
                  type: "line",
                  symbol: "emptydiamond",
                  data: [
                    [
                      this.filterDate(eventData.Data[j]["StartTime"]),
                      eventData.Data[j]["EventValue"]
                    ]
                  ],
                  markPoint: {
                    data: [
                      {
                        xAxis: this.filterDate(eventData.Data[j]["StartTime"]),
                        yAxis: eventData.Data[j]["EventValue"],
                        value: eventData.Data[j]["EventName"]
                      }
                    ]
                  },
                  //markLine:
                  //{
                  //  data: [{ xAxis: this.filterDate(eventData.Data[j]["StartTime"])}]
                  //}

                  markArea: {
                    silent: true,
                    label: {
                      fontSize: 16
                    },
                    itemStyle: {
                      normal: {
                        color: "transparent",
                        borderWidth: 1,
                        borderType: "dashed"
                      }
                    },
                    data: [
                      [
                        {
                          xAxis: this.filterDate(
                            eventData.Data[j]["StartTime"]
                          ),
                          yAxis: 0
                        },
                        {
                          xAxis: this.filterDate(
                            eventData.Data[j]["StartTime"]
                          ),
                          yAxis: eventData.Data[j]["EventValue"]
                        }
                      ]
                    ]
                  }
                });
              }
            }
            this.drawLine();
          }
        })
        .catch(err => {
          this.$toast.center("当前请求接口有问题，请联系管理员！！");
        });
    },
    //体温等后台请求数据
    getApiSigns() {
      //this.eventsArray=[];
      //var events = {};
      //events.Name='药物事件';
      //events.Data=[];
      //this.eventsArray.push(events);
      this.heartRateData = [];
      this.animalHeatData = [];
      this.sphygmusData = [];
      this.breatheData = [];
      this.diastolicBloodPressureData = [];
      this.systolicPressureData = [];
      this.oxyhemoglobinSaturationData = [];
      apiSigns({
        patientID: this.$store.getters.ID,
        startDate: this.startDate,
        endDate: this.endDate,
        sort: "asc"
      })
        .then(res => {
          var jsonData = JSON.parse(res);
          if (jsonData.Status == -1) {
            this.isShow = false;
          }
          if (jsonData.Status == 1) {
            for (var i = 0; i < jsonData.Data.length; i++) {
              this.heartRateData.push([
                this.filterDate(jsonData.Data[i]["时间"]),
                jsonData.Data[i]["心率"]
              ]);
              this.animalHeatData.push([
                this.filterDate(jsonData.Data[i]["时间"]),
                jsonData.Data[i]["体温"]
              ]);
              this.sphygmusData.push([
                this.filterDate(jsonData.Data[i]["时间"]),
                jsonData.Data[i]["脉搏"]
              ]);
              this.breatheData.push([
                this.filterDate(jsonData.Data[i]["时间"]),
                jsonData.Data[i]["自主呼吸频率"]
              ]);
              this.diastolicBloodPressureData.push([
                this.filterDate(jsonData.Data[i]["时间"]),
                jsonData.Data[i]["无创舒张压"]
              ]);
              this.systolicPressureData.push([
                this.filterDate(jsonData.Data[i]["时间"]),
                jsonData.Data[i]["无创收缩压"]
              ]);
              this.oxyhemoglobinSaturationData.push([
                this.filterDate(jsonData.Data[i]["时间"]),
                jsonData.Data[i]["血氧饱和度"]
              ]);
            }
            this.isShow = true;
            this.$nextTick(() => {
              this.getEvents();
            });
          }
        })
        .catch(err => {
          this.$toast.center("当前请求接口有问题，请联系管理员！！");
        });
    },
    //编辑事件点击事件
    routerView() {
      this.$router.push({
        path: "/eventsAnalysis/eventList",
        query: { item: 10 }
      });
    },
    filterDate(time) {
      if (!time) {
        return "";
      } else {
        time = time.replace(/\//g, "-");
        return (time = time.replace(/T/g, " "));
      }
    },
    drawChart() {
      var data1 = [
        { name: "2018-07-05 18:00:29", value: ["2018-07-05 18:00:29", 37, 2] },
        { name: "2018-07-04 18:00:29", value: ["2018-07-04 18:00:29", 36, 2] },
        {
          name: "2018-07-03 18:00:29",
          value: ["2018-07-03 18:00:29", 36.5, 2]
        },
        { name: "2018-07-03 12:00:29", value: ["2018-07-03 12:00:29", 36, 2] },
        {
          name: "2018-07-02 18:00:29",
          value: ["2018-07-02 18:00:29", 37.5, 2]
        },
        { name: "2018-07-01 18:00:29", value: ["2018-07-01 18:00:29", 38, 2] }
      ];
      var data = [
        { name: "2018-07-05 18:00:29", value: 37 },
        { name: "2018-07-04 18:00:29", value: 36 },
        { name: "2018-07-03 12:00:29", value: 36 },
        { name: "2018-07-02 18:00:29", value: 37.5 },
        { name: "2018-07-01 18:00:29", value: 38 }
      ];
      var datasource = [
        {
          source: [
            ["score", "amount", "visignTime"],
            [89.3, 58, "2018-07-06 18:00:29"],
            [57.1, 78, "2018-07-05 18:00:29"],
            [74.4, 41, "2018-07-04 18:00:29"],
            [50.1, 52, "2018-07-03 18:00:29"],
            [89.7, 60, "2018-07-02 18:00:29"],
            [68.1, 79, "2018-07-01 18:00:29"]
          ]
        }
      ];

      //时间显示范围
      /*
        var anchor1 = [
          {name:'2018-07-01', value: ['2018-07-01',0]},
          {name:'2018-07-08', value: ['2018-07-08',0]}
          ];
        var anchor = [
          {name:'2018-07-01', value: 0},
          {name:'2018-07-08', value: 0}
          ];
        */
      // 指定图表的配置项和数据
      var option = {
        dataset: datasource,
        backgroundColor: "#fff", //背景色

        tooltip: {
          // trigger: 'axis',
          formatter: function(param) {
            return param.value[0] + "<br>" + param.value[1] + "°C";
          }
        },
        xAxis: {
          type: "time",
          splitNumber: 10,
          axisLabel: {
            // rotate: 60,
            textStyle: {
              fontSize: 8
            }
          }
        },
        yAxis: {
          min: 35
        },

        visualMap: {
          top: 10,
          right: 10,
          pieces: [
            {
              gte: 0,
              lte: 59,
              color: "#4D74FA"
            },
            {
              gt: 59,
              lte: 89,
              color: "#FA578B"
            }
          ],
          outOfRange: {
            color: "#FA578B"
          }
          // show : false
        },

        series: [
          {
            //data: data,
            datasetIndex: 0,

            markLine: {
              silent: true,
              data: [
                {
                  xAxis: "2018-07-03 12:00:00"
                },
                {
                  xAxis: "2018-07-04 12:00:00"
                }
              ]
            },

            type: "line",
            smooth: true,
            encode: {
              x: "visignTime",
              y: "score"
            },

            markArea: {
              data: [
                [
                  {
                    xAxis: "2018-07-03 12:00:00"
                  },
                  {
                    xAxis: "2018-07-04 12:00:00"
                  }
                ]
              ],
              itemStyle: {
                opacity: 0.5,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fff" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#E7AEAD" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                }
              }
            }

            /*
               areaStyle: {
                   normal: {
                       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                           offset: 0,
                           color: 'rgb(255, 158, 68)'
                       }, {
                           offset: 1,
                           color: '#fff'
                       }])
                   }
               },
               */
          },

          {
            name: ".anchor",
            type: "line",
            showSymbol: false,
            //data:anchor,
            datasetIndex: 0,
            encode: {
              x: "visignTime",
              y: "amount"
            }
          }
        ]
      };

      //console.warn("draw line");
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption(option);
    }
  },
  components: {
    loading,
    noSearch,
    VueDatepickerLocal,
    modal,
    treeMenu
  }
};
</script>
<style scoped>
.indexComparisonContent {
  position: relative;
  padding: 20px;
  padding-top: 60px;
}

.title {
  font-size: 18px;
  padding-left: 40px;
}

.title span:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 20px;
  border-radius: 8px;
  margin-right: 8px;
  background: #11a7f3;
  vertical-align: text-top;
}

.datepicker {
  position: absolute;
  top: 10px;
  left: 102px;
}

.indexComparisonContent input[type="button"] {
  position: absolute;
  top: 10px;
  right: 102px;
  padding: 7px 15px;
  background-color: #11a7f3;
  color: #fff;
  border: 0;
}

.indexComparisonContent input[type="button"]:nth-child(2) {
  right: 202px;
}

.line,
.chartBox {
  width: 100%;
  height: 100%;
  /*width: 400px;*/
  min-width: 700px;
}
.chartBox {
  margin: 15px 0;
}

header {
  margin-top: 10px;
  font-size: 16px;
  padding-left: 15px;
  margin-bottom: 15px;
}

header .titleHeader {
  margin-bottom: 10px;
}

header input {
  height: 30px;
  border: 1px solid #ddd;
  width: 400px;
  padding-left: 12px;
}

header button {
  padding: 5px 15px;
  background-color: #11a7f3;
  color: #fff;
  border: 0;
  font-size: 14px;
  margin-left: 20px;
}

.contrast {
  display: flex;
}

.contrast .content {
  position: relative;
  height: 500px;
  overflow-y: auto;
  border: 1px solid #ddd;
  flex: 2;
}

.contrast .contentButton {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contentButton button {
  background: #fff;
  border: 1px solid #ccc;
  padding: 5px 15px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.contentList {
  display: flex;
  padding: 10px 15px;
}

.contentList label {
  margin-bottom: 0;
  font-weight: normal;
}
.wxtx{
  margin-top: 15px;
  color: red;
}
.titleHeader_box{
  display: flex;
}
@media screen and (max-width: 768px) {
  .indexComparisonContent input[type="button"] {
    position: initial;
  }
  .datepicker {
    left: 20px;
  }
}
@media screen and (max-width: 576px){
  header{
    padding-left: 0;
  }
  header input{
    width: auto;
  }
  .body{
    padding: 10px 0;
  }
}
@media screen and (max-width: 375px) {
  header button{
    margin-left: 10px;
  }
}
</style>
